<template>
	<div class="realImage-list table-theme">
		<head-title title="营销--实物图列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
					<select-view
						:option-list="typeList"
						:value="type"
						placeholder="类型"
						type="type"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数:{{total}}</p>
			<el-table :data="List">
				<el-table-column label="序号" align="center" prop="image_id"></el-table-column>
				<el-table-column label="商品id" align="center" prop="goods.goods_id"></el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods.goods_name"></el-table-column>
				<el-table-column label="商品主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.goods.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				
				
				<el-table-column label="上下架" align="center" v-if="status != 2">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.image_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="时间" align="center" prop="update_time"></el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="primary" v-if="status == 2" size="mini" @click="examine(scope.row.image_id)">审核</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import addPopup from '@/components/layer-dialog/add-popup.vue';
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			addPopup,
			SelectView,
			TabsView
		},
		data() {
			return {
				order_by: 'image_id',
				type: 6,
				typeList: [{
						value: 1,
						label: '颜色小图'
					},
					{
						value: 2,
						label: '颜色中图'
					},
					{
						value: 3,
						label: '中附图'
					},
					{
						value: 4,
						label: '大附图'
					},
					{
						value: 5,
						label: '详情图'
					},
					{
						value: 6,
						label: '实拍图'
					}
				],
				status: 0,
				orderbyList: [{
						value: 'image_id',
						label: '时间排序'
					},
					{
						value: 'sort',
						label: '序号排序'
					}
				],
				searchOption: [{
						value: 0,
						label: '商品ID'
					},
					{
						value: 1,
						label: '图片ID'
					}
				],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				List: [], // 列表
				total: 0,totalData: 0, 
				page: 0,
				classifyList: ['上架','下架','审核中']
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status +1,
					type: this.type,
					order_by:this.order_by,
					asc:2
				};

				if (this.classSelect === 0) data.goods_id = this.selectContent;
				if (this.classSelect === 1) data.image_id = this.selectContent;

				this.List = []
				this.$http(this.$ApiList.RealImageList, data).then(res => {
					this.List = res.datas;
					this.total = res.counts
				});
			},
			typeSelect() {
				this.init();
			},
			stateType(status) {
				this.status = status;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.classSelect = ''
				this.init()
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.total = 0;
				this.init();
			},
			// 上下架
			upDown(e, image_id) {
				let data = {
					status: e,
					image_id: image_id,
				};
				this.$http(this.$ApiList.RealImageOut, data).then(res => {
					this.$layer.msg(res.datas);
				});
			},
			//提交
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.AnswerUp, this.contentForm).then(res => {
							this.$layer.msg(res.datas);
							this.contentDialog = false;
							this.init();
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			examine(image_id) {
				let data = {
					image_id: image_id,
					status: 1
				}
				this.$http(this.$ApiList.RealImageOut, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
				});
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'type':
						this.type = value
						break;
				
					default:
						break;
				}
				this.init()
			}

		},
		created() {
			this.init();
		},
	};
</script>
<style lang="scss">
	.realImage-list {
		width: 100%;
		
	}
</style>
